<template>
  <div class="page">
    <div class="content">
      <heading></heading>
      <div class="top">
        <h1>{{$t('开始玩吧')}}</h1>
        <h2>{{$t('你需要一个玩客币(链克)钱包与一些玩客币才能继续账户的创建与绑定，这花费不了多少时间，但非常值得。')}}</h2>
        <x-button class="begin" link="/login">{{$t('准备好了')}}</x-button>
      </div>
      <div class="qa">
        <h2 class="title">{{$t('快速开始')}}</h2>
        <div class="item">
          <h3>1.{{$t('获取钱包/玩客币')}}</h3>
          <p>{{$t('首先你需要一个迅雷玩客云的钱包，钱包可以从')}} <a href="http://red.xunlei.com/index.php?r=site/coin">{{$t('这里下载')}}</a> ，{{$t('手机版本的请从对应的应用商城下载即可，因为实名制的限制，你需要对账户进行')}} <a href="http://wanke.xunlei.com/forum.php?mod=viewthread&tid=1200&extra=page%3D1">{{$t('实名认证')}}</a>。{{$t('然后你就可以选择')}} <a href="http://zqb.red.xunlei.com/html/book.html">{{$t('购买玩客云')}}</a> {{$t('进行挖矿或者从朋友获取一些玩客币。')}}</p>
        </div>
        <div class="item">
          <h3>2.{{$t('注册与绑定钱包')}}</h3>
          <p>{{$t('使用手机号注册玩客猴账号，并使用自己的钱包地址进行认证绑定，之后所有的操作请通过绑定的钱包地址进行。')}}</p>
        </div>
        <div class="item">
          <h3>3.{{$t('下次在哪能找到我的小猴子？')}}</h3>
          <p>{{$t('玩客猴是由HTML5技术完成，理论上你能在任何浏览器中打开，不过为了更好的体验，建议你在手机上操作，PC可以通过访问http://monkey.plus进行访问。')}}</p>
        </div>
        <div class="more">
          <router-link to="/help">{{$t('还有问题，查阅全部帮助')}}</router-link>
        </div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>

<i18n>
你需要一个玩客币(链克)钱包与一些玩客币才能继续账户的创建与绑定，这花费不了多少时间，但非常值得。:
  en: You need an OTC Wallet and some wkcs to finish the creation and binding of the account, which doesn't take much time, but it's worth it.
准备好了:
  en: Ready
快速开始:
  en: Getting started
获取钱包/玩客币:
  en: Get an OTC Wallet or some wkcs
首先你需要一个迅雷玩客云的钱包，钱包可以从:
  en: First of all, you need a Thunder OTC Wallet. The wallet can be
这里下载:
  en: downloaded here
手机版本的请从对应的应用商城下载即可，因为实名制的限制，你需要对账户进行:
  en: and the version of the mobile phone app can be downloaded from the App store on your phone. Due to the limitation of the real-name registration system, you need to do the
实名认证:
  en: real name authentication
然后你就可以选择:
  en: And then you can choose to  
购买玩客云:
  en: purchase the OneCloud
进行挖矿或者从朋友获取一些玩客币。:
  en: for mining or get some wkcs from friends.
注册与绑定钱包:
  en: Registration and wallet binding
使用手机号注册玩客猴账号，并使用自己的钱包地址进行认证绑定，之后所有的操作请通过绑定的钱包地址进行。:
  en: Register the LinkMonkey account with your cell phone number, bind and authenticate it with your OTC Wallet address. All later operations shall be carried out through the bound wallet address.
下次在哪能找到我的小猴子？:
  en: Where can I find my little monkey next time?
玩客猴是由HTML5技术完成，理论上你能在任何浏览器中打开，不过为了更好的体验，建议你在手机上操作，PC可以通过访问 http://monkey.plus 进行访问。:
  en: The LinkMonkey is done by HTML5 technology, theoretically you can open it in any browser, but for a better experience, it is recommended that you operate it on your phone. You can log in by http://monkey.plus on PC. 
还有问题，查阅全部帮助:
  en: Still confused? View full FAQ
</i18n>

<script>
  import {
    XButton,
    Box
  } from 'vux'
  import heading from './common/header.vue'
  import foot from './common/foot.vue'
  export default {
    components: {
      XButton,
      Box,
      heading,
      foot
    },
    data() {
      return {}
    },
    mounted() {
      this.$nextTick(function() {
      });
    },
  }
</script>

<style lang="scss" scoped>
  .page {
    padding: 0;
    background: #00182c url(/static/bg2.jpg) no-repeat;
    background-size: contain;
  }
  .content {
    padding: 0 12px;
  }
  .top {
    color: #fff;
    // text-align: justify;
    h1 {
      font-size: 60px;
      line-height: 1.2;
      padding: 60px 0 20px;
    }
    h2 {
      font-size: 24px;
      line-height: 1.4;
    }
    .begin {
      width: 130px;
      height: 44px;
      background-color: #659eec;
      border-radius: 5px;
      color: #fff;
      margin: 25px 0 0;

    }
  }
  .qa {
    padding: 100px 0;
    .title {
      font-size: 35px;
      border-bottom: 1px solid #c4ddf0;
      color: #fff;
    }
    .item {
      margin-top: 30px;
      h3 {
        font-size: 18px;
        color: #fff;
      }
      p {
        font-size: 14px;
        color: #ccc;
        // text-align: justify;
        a {
          color: $link;
          text-decoration: underline;
        }
      }
    }
    .more {
      text-align: center;
      padding-top: 20px;
      a {
        color: $link;
        text-decoration: underline;
      }
    }
  }
</style>
